<template>
	<view class="myConsultation">
		<Navigation backType="back" title="我的问诊" background="#fff" />
		<view class="background-white ph-32 h-80">
			<view class="w-f h-60 search">
				<u-search placeholder="输入订单号" v-model="listParams.keyword" height="30" bgColor="#F5F5F5"
					searchIconColor="#999" placeholderColor="#999" clearabled :showAction="false" @search="toSearch">
				</u-search>
				<view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle"
						@click.stop="toSearch"></u-button></view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: height - 40 + 'px' }">
			<view class="mt-20 background-white ph-32 pv-32" @click="toDetail(item)" v-for="(item,index) in list">
				<view class="f ai-c jc-s-b">
					<view class="fs-24 text-color3">订单编号：{{item.no}}</view>
					<view class="fs-24 text-color">{{statusList[item.status]}}</view>
				</view>
				<view class="f mt-32">
					<image :src="item.memberDoctorDO.avatar" class="w-160 h-160 b-12 mr-20" v-if="item.memberDoctorDO">
					</image>
					<view class="f ai-c f1">
						<view class="f f1 mr-24 fd-c">
							<view class="fs-28 fw-600 text-color4" v-if="item.memberDoctorDO">
								{{item.memberDoctorDO.name}}
							</view>
							<view class="f ai-c mt-8">
								<view class="fs-20 w-52 h-28 ai-c jc-c mr-8 b-4 voice" v-if="item.type==2">电话</view>
								<view class="fs-20 w-52 h-28 ai-c jc-c mr-8 b-4 imageText" v-if="item.type==1">图文</view>
								<view class="fs-20 w-52 h-28 ai-c jc-c b-4 tel" v-if="item.type==3">视频</view>
							</view>
							<view class="fs-26 fw-600 mt-20 text-color7">¥{{item.totalPrice}}</view>
						</view>
					</view>
				</view>
				<view class="f jc-f-e mt-32">
					<view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color4 border ml-16"
						@click.stop="toEvaluate(item)" v-if="!item.consultationCommentId&&item.status==3">去评价</view>
					<view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color4 border ml-16" @click.stop="del(item)"
						v-if="item.payStatus==0">取消</view>
					<view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color border2 ml-16" v-if="item.payStatus==0"
						@click.stop="handlePay(item)">立即付款</view>
					<view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color border2 ml-16" @click.stop="zix(item)"
						v-if="item.status==2&&item.type==1">立即咨询</view>
					<view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color border2 ml-16" @click.stop="zix2(item)"
						v-if="item.status==2&&item.type==3">立即咨询</view>
				</view>
				<view class="fs-24 text-color3 pt-20 time">时间：{{item.createTime}}</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
	import { orderPage, orderDelte, socialUser,formatTimestamp } from '@/services/api/index/index';
	import { orderSubmit } from '@/services/api/shop/order';
	import { useAuthStore } from '@/store/modules/auth';
	const list = ref<any[]>([]);
	const keyword = ref('');
	const authStore = useAuthStore();
	const openid = ref('');
	const statusList = ref({ 1: '待付款', 2: '服务中', 3: '已完成' });
	const listParams = ref<any>({
		userId: authStore.getUserId,
		pageNo: 1,
		pageSize: 10,
		keyword: ''
	});
	onShow(async () => {
		if (authStore.getOpenId) {
			openid.value = authStore.getOpenId
		} else {
			await getLogin()
		}
		toSearch();
	});

	async function getList() {
		const { data } = await orderPage(listParams.value);
		data.list.forEach((item : any) => {

			if (item.createTime) {

				item.createTime = formatTimestamp(item.createTime);
			}

		});
		list.value = list.value.concat(data.list);
	}

	async function getLogin() {
		uni.login({
			provider: 'weixin',
			success: async (res) => {
				let result = await socialUser({ userID: authStore.getUserId, type: 10, state: '123', code: res.code });
				openid.value = result.data.openid
			},
		})
	}

	async function del(item : any) {
		await orderDelte(item.id);
		uni.showToast({
			title: '取消成功',
			icon: 'none',
		});
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}

	function toSearch() {
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}
	//立即支付
	async function handlePay(item : any) {
		const { data } = await orderSubmit({ id: item.payOrderId, channelCode: 'wx_lite', channelExtras: { openid: openid.value } });
		let displayContent = JSON.parse(data.displayContent);
		await uni.requestPayment({
			provider: "wxpay",
			timeStamp: displayContent.timeStamp,
			nonceStr: displayContent.nonceStr,
			package: displayContent.packageValue,
			signType: displayContent.signType,
			paySign: displayContent.paySign,
			success(res2) {
				uni.showToast({
					title: '支付成功',
				});
				setTimeout(() => {
					list.value = [];
					listParams.value.pageNo = 1;
					getList();
				}, 1000);

			},
			fail(e) {
				console.log(e)
				uni.showToast({
					title: '支付失败,请重新支付',
					icon: 'none'
				})
			}
		})

	}
	function toDetail(item : any) {
		uni.navigateTo({
			url: `/pages_mine/consultationDetail?id=${item.id}`,
		});
	}
	function zix(item : any) {
		uni.navigateTo({
			url: `/pages_serve/chat/chat?doctorId=${item.doctorId}&name=${item.petsDO.name}&avatar=${item.petsDO.avatar}&gender=${item.petsDO.gender}&age=${item.petsDO.age}&pet_id=${item.petsDO.id}`,
		});
	}
	function zix2(item : any) {
		uni.navigateTo({
			url: `/TUICallKit/pages/call?id=${item.doctorId}`,
		});
	}

	//评价
	function toEvaluate(item : any) {
		uni.navigateTo({
			url: `/pages_mine/consultationEvaluate?id=${item.id}`,
		});
	}
	//下拉刷新
	onPullDownRefresh(() => {
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	});
	//上拉加载
	onReachBottom(() => {
		listParams.value.pageNo++;
		getList();
	});
	let systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let pageHeight = systemInfo.windowHeight;
	const height = pageHeight - statusBarHeight - 46 - 43;
</script>
<style lang="scss" scoped>
	
	.myConsultation {
		background: #f5f5f5;
		min-height: 100vh;
.time{
	        border-top: 1px solid #f5f5f5;
	    }
		.border2 {
			border: 1rpx solid #fabb3c;
		}

		.border {
			border: 1rpx solid #dddddd;
		}

		.voice {
			background: #fff9e6;
			color: #fac519;
			text-align: center;
		}

		.imageText {
			background: #f0f2f5;
			color: #5769a0;
			text-align: center;
		}

		.tel {
			background: #edf2ff;
			color: #4974f5;
			text-align: center;
		}

		.search {
			position: relative;

			.search-btn {
				position: absolute;
				right: 6rpx;
				top: 6rpx;
				z-index: 11;
			}

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}
		}

		.background-white {
			background: #fff;
		}
	}
</style>